<template>
  <div class="state-recent">
    <el-card
      shadow="never"
      class="aui-card--fill">
      <div
        slot="header"
        class="head">
        <h2>近期</h2>

        <!--        <div class="time-options">-->
        <!--          <h4>今日内</h4>-->
        <!--          <h4>7日内</h4>-->
        <!--        </div>-->
        <!--          @tab-click="handleClick"-->
      </div>

      <el-row :gutter="30">
        <el-col
          :span="4"
          class="ip-col">
          <!--         IP list -->
          <h3>选择IP进行查看</h3>
          <div class="ip-list">
            <p
              class="ip-list-item"
              :class="[dataForm.ip === '' && 'ip-list-item-selected']"
              @click="clickOnIp('')"
            >
              <span>全部</span>
            </p>
            <p
              v-for="item in ipList"
              :key="item.id"
              class="ip-list-item"
              :class="[dataForm.ip === item.ip && 'ip-list-item-selected']"
              @click="clickOnIp(item.ip)"
            >
              <span>{{ item.ip }}</span>
            </p>
          </div>
        </el-col>

        <el-col :span="20">
          <el-row :span="24">
            <!--                  -->
            <el-tabs
              v-model="durationType"
              type="card"
              @tab-click="durationTypeClick"
            >
              <el-tab-pane
                label="今日内"
                name="today"/>
              <el-tab-pane
                label="7日内"
                name="week"/>
            </el-tabs>
            <state-recent-charts
              :type="durationType"
              :ip="dataForm.ip"
            />
          </el-row>
        </el-col>
      </el-row>

      <!--        Line charts display , can select one ip -->
    </el-card>
  </div>
</template>

<script>
import sysStateMixins from '@/mixins/sys-state/sys-state.mixins'
// import { MACHINE_STATE_MONITOR_TYPE } from '@/utils/constant'
// import moment from 'moment'
import StateRecentCharts from './state.recent.charts'
export default {
  name: 'StateRecent',
  components: { StateRecentCharts },
  mixins: [sysStateMixins],
  data () {
    return {
      durationType: 'today'
    }
  },

  beforeMount () {
    // hours
    // this.dataForm.startDate = new-old-user Date()
    // this.dataForm.endDate = new-old-user Date()
  },
  mounted () {
    this.getIpList()
  },

  methods: {
    durationTypeClick (tab, event) {
      this.durationType = tab.name
    },
    clickOnIp (ip) {
      this.dataForm.ip = ip
    }
  }
}
</script>

<style scoped lang="scss">
.state-recent {
  .head {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}
</style>
